<template>
  <div class="cart">
    <ul>
      <li v-for="item in items" :key="item.id">
        {{item.title}}  ------  {{item.price}}   -----  {{item.quantity}}件
      </li>
    </ul>
    <br>
    <div>{{total}}</div>
    <button @click="checkout(items)">结算</button>
    <br>
    <div v-if="checkoutStatus">{{ checkoutStatus }}</div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'Cart',
  computed: {
    ...mapState({
      checkoutStatus: state => state.cart.checkoutStatus
    }),
    ...mapGetters('cart', {
      items: 'getCartProducts',
      total: 'getTotalPrice'
    })
  },
  methods: {
    checkout (products) {
      this.$store.dispatch('cart/checkoutProducts', products)
    }
  }
}
</script>

<style scoped>

</style>
